import React, { useState, useEffect } from 'react';
// import styles from './index.less';

import kls from 'classnames';
import EchartsWrap from '@/components/widgets/EchartsWrap';
import 'echarts-liquidfill/src/liquidFill.js';
// import { useStatisticsData } from '../../index';
import _cloneDeep from 'lodash/cloneDeep';
import { useSelector } from 'umi';
import moment from 'moment';

const Chart2 = ({ data }) => {
  // const [rawData] = useStatisticsData(); // 单一api中的值
  const [dataOption, setDataOption] = useState(null);

  useEffect(() => {
    if (!data) {
      return;
    }
    setDataOption(getAnalysisChartCfg(data));
  }, [data]);

  function getAnalysisChartCfg(data) {
    let [xData, speedData] = data.reduce(
      (r, e) => {
        r[0].push(/\s+(\d|:)*/.exec(e.sj)[0].trim());
        r[1].push(e.v);
        return r;
      },
      [[], []],
    );

    let options = {
      color: ['#2FB0FF'],
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        left: 0,
        right: 0,
        bottom: 0,
        top: '10%',
        containLabel: true,
        // z: 22,
      },

      xAxis: [
        {
          type: 'category',
          gridIndex: 0,
          data: xData,
          axisTick: {
            show: false,
            alignWithLabel: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: 'rgba(255,255,255,0.2)',
            },
          },
          axisLabel: {
            show: true,
            color: 'rgba(255,255,255,0.5)',
            fontSize: 12,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          gridIndex: 0,
          axisTick: {
            show: false,
            alignWithLabel: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)',
            },
          },
          axisLabel: {
            color: 'rgba(255,255,255,0.5)',
            formatter: '{value}',
            fontSize: 12,
          },
          splitLine: {
            show: false, //网格线显示
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.1)',
            },
          },
        },
      ],
      series: [
        {
          type: 'line',
          data: speedData,
          smooth: true,
          name: '速度',
        },
      ],
    };

    return options;
  }

  if (!dataOption) {
    return null;
  }
  return (
    // <div className={styles.box}>
    //   <div className={styles.unit}>单位：dB</div>
    <EchartsWrap option={dataOption} style={{ width: '100%', height: 148 }} />
    // </div>
  );
};
export default Chart2;
